<template>
	<RouterView v-slot="{ Component }">
		<template v-if="useAnimation && useCache">
			<Transition name="mainRouter">
				<KeepAlive :include="store.cacheRoutes">
					<component v-if="store.refreshState" :is="Component" :key="route.name" />
				</KeepAlive>
			</Transition>
		</template>
		<template v-else-if="useAnimation">
			<Transition name="mainRouter">
				<component v-if="store.refreshState" :is="Component" :key="route.name" />
			</Transition>
		</template>
		<template v-else-if="useCache">
			<KeepAlive :include="store.cacheRoutes">
				<component v-if="store.refreshState" :is="Component" :key="route.name" />
			</KeepAlive>
		</template>
		<template v-else>
			<component v-if="store.refreshState" :is="Component" :key="route.name" />
		</template>
	</RouterView>
</template>

<script setup>
import { watchEffect, Transition, KeepAlive, h } from 'vue';
import { useRoute, RouterView } from 'vue-router';
import { useStore } from '@/store';
const store = useStore();
const route = useRoute();
const { useAnimation = true, useCache = false } = route.meta;
</script>

<style>
.mainRouter-enter-from,
.mainRouter-enter-active,
.mainRouter-leave-active,
.mainRouter-leave-to {
	position: absolute !important;
	width: calc(100% - 40px);
	transition: all 0.5s;
}

.mainRouter-enter-from {
	opacity: 0;
	transform: translateX(50%);
}

.mainRouter-leave-to {
	opacity: 0;
	z-index: -99;
	transform: translateX(-50%);
}
</style>